Interactive

Accordion List

An accordion list uses an HTML description list to group togglable elements together.

Description terms can be toggled independently by using the individual toggle buttons or all together by using the the open/close all button.

Each dt contains a button element that is used to toggle the contents of the corresponding dd element. In order to link these two elements:

  1. Each button must have an id attribute with a unique value.
  2. Each dd must have an aria-labelledby attribute who's value matches the corresponding button id.

Keyboard Accesiblity

Users are able to:

  • Tab each accordion button.
  • Interact with accordion buttons and open/close it's corresponding contents by with either the space bar or by hitting enter.
  • Tab into the contents an open accordion (as long as there are tabbable items).

View

This is the content of the accordion.
This is the content of the accordion.
This is the content of the accordion.

HTML

<button class="cmp-button cmp-accordion-toggle-all js-toggle-all" aria-controls="sample-list" aria-hidden="true">Open All</button>

<dl id="sample-list" class="cmp-accordion">
  <dt>
    <button id="item1" class="cmp-accordion__button js-toggler" aria-expanded="true">Accordion One</button>
  </dt>
  <dd class="cmp-accordion__content" aria-labelledby="item1" aria-hidden="false">
    This is the content of the accordion.
  </dd>
  <dt>
    <button id="item2" class="cmp-accordion__button js-toggler" aria-expanded="true">Accordion Two</button>
  </dt>
  <dd class="cmp-accordion__content" aria-labelledby="item2" aria-hidden="false">
    This is the content of the accordion.
  </dd>
  <dt>
    <button id="item3" class="cmp-accordion__button js-toggler" aria-expanded="true">Accordion Three</button>
  </dt>
  <dd class="cmp-accordion__content" aria-labelledby="item3" aria-hidden="false">
    This is the content of the accordion.
  </dd>
</dl>

Carousel

The homepage carousel uses a combination of utility classes, quote typography styles, and vendor styles. There should only be one glider per page.

When the next/previous button is clicked in the carousel, the content changes. If no more content exists, the next/previous button will be disabled.

Keyboard Accesiblity

Users are able to:

  • Tab between the control buttons.
  • Interact with the control buttons with either the space bar or by hitting enter.

View

What Students are Saying

Many of the people in my class are teachers, and we all teach different programs – and some teach in other states – so I get a chance to hear from people near and far.

Maima Chea, PhD Student, Georgia State University
M.Ed., Reading Ed., '15

Even though I only see them a handful of times a year, I consider my fellow students some of my dearest friends. You’re never alone. I don’t want to trivialize this degree and compare the program to summer camp, but that’s the mentality behind our relationships. I know I’ll have this loving network for the rest of my life.

Sarra Sedghi, Freelancer
MFA, '17

HTML

<section class="util-background-light-gray util-pad-vert-lg util-pad-vert-xl@md util-display-none@print">
  <div class="obj-reading-width">
    <h2 class="cmp-quote-heading">What Students are Saying</h2>

    <div class="glider-contain">
      <div class="glider">
        <div class="glider-slide">
          <p class="cmp-quote-text">Many of the people in my class are teachers, and we all teach different programs – and some teach in other states – so I get a chance to hear from people near and far.</p>
          <p class="cmp-quote-credit">Maima Chea, PhD Student, Georgia State University<br>M.Ed., Reading Ed., &#x27;15</p>
        </div>
        <div class="glider-slide">
          <p class="cmp-quote-text">Even though I only see them a handful of times a year, I consider my fellow students some of my dearest friends. You’re never alone. I don’t want to trivialize this degree and compare the program to summer camp, but that’s the mentality behind our relationships. I know I’ll have this loving network for the rest of my life.</p>
          <p class="cmp-quote-credit">Sarra Sedghi, Freelancer<br>MFA, &#x27;17</p>
        </div>
      </div>

      <button role="button" class="glider-control glider-control--prev">Previous</button>
      <button role="button" class="glider-control glider-control--next">next</button>
    </div>
  </div>
</section>